<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <!--
            1.在进行事件绑定的时候一定需要加上函数的()调用操作
            2.原生js事件绑定的时候不需要参数操作就会有默认的event事件对象
            3.可以给原生js事件绑定操作进行event对象的传递操作，而event就是实参数对象
            4.event实参对象的位置可以在函数调用中任意设置
        -->
        <input
            type="text"
            placeholder="原生js事件"
            oninput="jsEvent('123',event)"
        />

        <div id="root">
          <p>{{title}}</p>
          <input
            type="text"
            placeholder="vue事件"
            v-on:input="vueEvent($event)"/>        
        </div>
        <script>
          function jsEvent(num, e) {
            console.log(num, e);
          }

          new Vue({
            el: '#root',
            data: {
            title: 'Vue2',
          },
            methods: {
             // 1.vue事件不能使用箭头函数
             // vueEvent: () => {
             //     console.log(this); // 找不到实例的this指向
             // },
             // 2.可以使用普通函数及普通函数的简写模式
             // 3.在vue事件中仍旧保留了原生js事件的event对象
             // 4.但是vue的事件绑定可以是没有()函数调用的
             // 5.vue的事件绑定仍旧可以进行()的调用绑定操作，并且传递参数
             // 6.vue的事件绑定对象的参数不再是原生的event实参对象，而变成了$event
              vueEvent(e) {
            console.log(e.target.value);
          },
        },
      });
    </script>
</body>
</html>